<!--
  @author:  long
  @date:    2024/5/24
  @file:    xx
  @require:
-->
<template>
  <div class="app-container">
    <div class="flex align-center justify-between">
      <div class="text-2xl">全部项目</div>
      <div>
        <el-button type="primary" icon="Plus" @click="handleCreateProject"
          >新建项目
        </el-button>
      </div>
    </div>
    <!--   搜索   -->
    <div class="py-5">
      <el-input
        v-model="queryForm.name"
        style="width: 300px; padding-right: 10px"
        placeholder="搜索 ( enter )"
        prefix-icon="Search"
        clearable
        @keydown.enter="getList"
      />
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button type="primary" plain @click="getAllList">全部</el-button>
    </div>
    <!--   表格   -->
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      @cell-mouse-enter="handleMouseEnter"
      @cell-mouse-leave="handleMouseLeave"
      @row-dblclick="handleRowDblclick"
    >
      <el-table-column prop="date" label="项目">
        <template #default="scope">
          <div class="flex align-center py-3">
            <!--      引用scurmFill svg      -->
            <img class="tableSvgIcon" src="@/assets/icons/svg/scrumFill.svg" />
            <el-tooltip placement="top" :content="scope.row.name">
              {{ scope.row.name }}
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="180">
        <template #default="{ row }">
          <div class="flex items-center">
            <!--            <div class="table-icon">-->
            <!--              <div v-show="row.hovered">-->
            <!--                <i class="i-solar-square-share-line-linear"></i>-->
            <!--              </div>-->
            <!--            </div>-->
            <div v-show="row.hoveredPop">
              <el-popover
                :visible="popoverVisible[row.id]"
                placement="right-start"
                :width="200"
                trigger="click"
                popper-class="popoverClass"
                @hide="popoverHide(row)"
              >
                <div class="popoverUl">
                  <el-popover
                    placement="right"
                    :width="300"
                    trigger="hover"
                    :offset="22"
                    @after-enter="popoverAfter(row)"
                  >
                    <pop-project-info
                      :projectInfo="projectInfo"
                    ></pop-project-info>
                    <template #reference>
                      <div class="popoverLi cursor-pointer">
                        <div class="li-left">
                          <div class="li-icon">
                            <el-icon size="20" color="#aaa">
                              <Warning />
                            </el-icon>
                          </div>
                          <div class="li-content">项目信息</div>
                        </div>
                        <div class="li-right">
                          <el-icon size="15" color="#aaa">
                            <ArrowRight />
                          </el-icon>
                        </div>
                      </div>
                    </template>
                  </el-popover>
                  <el-divider></el-divider>
                  <div
                    class="popoverLi cursor-pointer"
                    @click="handleEditProjectInfo(row)"
                  >
                    <div class="li-left">
                      <div class="li-icon">
                        <el-icon size="18" color="#aaa">
                          <Edit />
                        </el-icon>
                      </div>
                      <div class="li-content">编辑信息</div>
                    </div>
                    <div class="li-right"></div>
                  </div>
                  <el-divider></el-divider>
                  <div
                    class="popoverLi cursor-pointer"
                    @click="handleSetting(row)"
                  >
                    <div class="li-left">
                      <div class="li-icon">
                        <el-icon size="18" color="#aaa">
                          <Setting />
                        </el-icon>
                      </div>
                      <div class="li-content">高级设置</div>
                    </div>
                    <div class="li-right"></div>
                  </div>
                </div>

                <template #reference>
                  <div class="table-icon" @click="popoverShow(row)">
                    <el-tooltip placement="top" content="更多">
                      <i class="i-ic-baseline-more-vert"></i>
                    </el-tooltip>
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="identification" label="标识" width="180" />
      <el-table-column prop="userName" label="所属" width="180" />
      <el-table-column prop="updateTime" label="更新时间" width="180" />
    </el-table>
    <pagination
      class="h-45px"
      :total="tableTotal"
      v-model:page="queryForm.pageNum"
      v-model:limit="queryForm.pageSize"
      @pagination="getList"
    />
    <create-project ref="createProjectRef"></create-project>
  </div>
</template>

<script setup name="projectManage">
import PopProjectInfo from '@/views/researchManage/projectManage/modal/PopProjectInfo.vue'
import CreateProject from '@/views/researchManage/projectManage/modal/CreateProject.vue'
import router from '@/router'
import { getRepaymentProjectList } from '@/api/researchManage/projectManage'

const name = ref('')
const popoverVisible = ref({})
const table = ref(null)
const createProjectRef = ref(null)
const tableData = ref([])
const tableTotal = ref(0)
const projectInfo = ref({})
const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
  type: '',
  name: ''
})

//表格双击
const handleRowDblclick = row => {
  console.info(row)
  //确认
  router.push({
    path: '/researchManage/proDetails',
    query: {
      modal: 'backlog',
      projectId: row.id
    }
  })
}
// 基本信息展示
const popoverAfter = row => {
  projectInfo.value = row
}

// 全部
const getAllList = () => {
  queryForm.value.name = ''
  queryForm.value.type = ''
  getList()
}

//获取列表
const getList = () => {
  //获取列表
  getRepaymentProjectList(queryForm.value).then(res => {
    tableTotal.value = res.data.total
    tableData.value = res.data.records
    tableData.value.forEach(item => {
      item.hovered = false
      item.hoveredPop = false
    })
  })
}

getList()

// 跳转高级设置
const handleSetting = row => {
  //确认
  router.push({
    path: '/researchManage/proDetails',
    query: {
      modal: 'settings',
      handle: 'advanced',
      projectId: row.id
    }
  })
}

//新建项目
const handleCreateProject = () => {
  createProjectRef.value.handleOpen()
}

// 鼠标移入
const handleMouseEnter = row => {
  row.hovered = true
  row.hoveredPop = true
}
// 鼠标移出
const handleMouseLeave = row => {
  row.hovered = false
  if (!popoverVisible[row.id]) {
    row.hoveredPop = false
  }
}
// 点击更多
const popoverShow = row => {
  popoverVisible[row.id] = true
}
// 隐藏popover
const popoverHide = row => {
  popoverVisible[row.id] = false
  row.hoveredPop = false
}
//编辑项目信息
const handleEditProjectInfo = row => {
  //确认
  router.push({
    path: '/researchManage/proDetails',
    query: {
      modal: 'settings',
      handle: 'infoEdit',
      projectId: row.id
    }
  })
}
</script>

<style scoped lang="scss">
.tableSvgIcon {
  width: 23px;
  height: 23px;
  margin-right: 10px;
}

.table-icon {
  @apply flex justify-center items-center w-8 h-8 mr-5 rounded;
}

.table-icon i {
  font-size: 14px;
}

.table-icon:hover {
  cursor: pointer;
  background-color: #c6e2ff;
}

:deep(.popoverLi) {
  @apply flex justify-between items-center;

  .li-left,
  .li-right {
    @apply flex items-center;
  }

  .li-icon {
    @apply flex items-center mr-2;
  }

  .li-content {
    @apply color-#333 text-lg;
  }
}

:deep(.el-divider--horizontal) {
  margin: 12px 0;
}
</style>
